<template>
    <el-pagination 
        @size-change="SizeChange" 
        @current-change="CurrentChange" 
        :current-page.sync="currentPage" 
        :page-sizes="[10, 20, 50, 100]" 
        :page-size="pageSize" 
        layout="sizes,total, prev, pager, next" 
        :total="totalB">
    </el-pagination>
</template>
<script>
    export default {
        props:{
            recoder:Array,
        },
        data() {
            return {
                currentPage:1,//当前页码
                pageSize:10, //分页数
                totalB:0, //总数
            }
        },

        watch: {
            "recoder":{
                handler(n){
                    this.showdata(true);
                },
                deep:true
            }
        },
        methods: {
            SizeChange(val){
                this.pageSize = val;
                this.showdata();
            },
            showdata(init=false)
            {
                if(init==true){
                    this.currentPage=1;
                }
                this.totalB=this.recoder.length;
                if (this.recoder.length >= 0)
                {
                    let offset = (this.currentPage - 1) * this.pageSize;
                    let showrecoders=this.recoder.slice(offset, this.pageSize+offset);
                    this.$emit('changed',showrecoders,offset);
                }
            },
            CurrentChange(val){
                this.currentPage = val;
                this.showdata();
            },
        },
    }
</script>